<div class="main clearfix">
	<nav id="menu" class="menu">					
		<ul>
			<li>
				<a href="index.html">
					<span class="icon">
						<img src="Resources/Pictures/blason.png" alt="blason"/>
					</span>
				</a>
			</li>
			<li>
				<a class="menu_item_link" data-toggle="modal" href="#newMemberSubscription">
					<span class="icon"> 
						<span class="glyphicon glyphicon-edit"></span>
					</span>
					<span>Devenir membre</span>
				</a>
			</li>
			<li>
				<a class="menu_item_link" data-toggle="modal" href="#teamPresentation">
					<span class="icon">
						<span class="glyphicon glyphicon-th-large"></span>
					</span>
					<span>Le bureau</span>
				</a>
			</li>
			<li>
				<a class="menu_item_link" data-toggle="modal" href="#archives">
					<span class="icon">
						<span class="glyphicon glyphicon-compressed"></span>
					</span>
					<span>Archives</span>
				</a>
			</li>
			<li >
				<a class="menu_item_link" data-toggle="modal" href="#contacts">
					<span class="icon">
						<span class="glyphicon glyphicon-phone-alt"></span>
					</span>
					<span>Nous contacter</span>
				</a>
			</li>
			<li>
				<a ng-hide="isAuthenticate" data-toggle="modal" href="#authenticate">
					<span class="icon">
						<span class="glyphicon glyphicon-log-in"></span>
					</span>
					<span>{{ Main_Authenticate }}</span>
				</a>
				<table>
					<tr>
						<td>
							<a ng-show="isAuthenticate" ng-click="personalSpaceCommand()">
								<span class="icon">
									<span class="glyphicon glyphicon-th"></span>
								</span>
								<span>{{ Main_PersonalSpace }}</span>
							</a>
						</td>
						<td>
							<a ng-show="isAuthenticate" ng-click="logoutCommand()">
								<span class="icon">
									<span class="glyphicon glyphicon-log-out"></span>
								</span>
								<span>{{ Main_Logout }}</span>
							</a>
						</td>
					</tr>
				</table>
			</li>
			<li>
				<a href="http://www.ville-bruyereslechatel.fr/" target="_blank">
					<span class="icon">
						<img src="Resources/Pictures/logo_bruyeres.png"  alt="logo bruyeres le chatel"/>
					</span>
				</a>
			</li>
		</ul>
	</nav>
</div>

<script type="text/javascript">
	//  The function to change the class
	var changeClass = function (r,className1,className2) {
		var regex = new RegExp("(?:^|\\s+)" + className1 + "(?:\\s+|$)");
		if( regex.test(r.className) ) {
			r.className = r.className.replace(regex,' '+className2+' ');
	    }
	    else{
			r.className = r.className.replace(new RegExp("(?:^|\\s+)" + className2 + "(?:\\s+|$)"),' '+className1+' ');
	    }
	    return r.className;
	};	

	//  Creating our button in JS for smaller screens
	var menuElements = document.getElementById('menu');
	menuElements.insertAdjacentHTML('afterBegin','<button type="button" id="menutoggle" class="navtoogle" aria-hidden="true"><i aria-hidden="true" class="icon-menu"> </i> Menu</button>');

	//  Toggle the class on click to show / hide the menu
	document.getElementById('menutoggle').onclick = function() {
		changeClass(this, 'navtoogle active', 'navtoogle');
	}
	document.onclick = function(e) {
		var mobileButton = document.getElementById('menutoggle'),
			buttonStyle =  mobileButton.currentStyle ? mobileButton.currentStyle.display : getComputedStyle(mobileButton, null).display;

		if(buttonStyle === 'block' && e.target !== mobileButton && new RegExp(' ' + 'active' + ' ').test(' ' + mobileButton.className + ' ')) {
			changeClass(mobileButton, 'navtoogle active', 'navtoogle');
		}
	}

</script>